<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>ajax请求超时和取消请求</h1>
  <button class="btn1">点击我发送get方法的ajax</button>
  <button class="btn2">点击发送get形式的ajax按钮二</button>
  <button class="btn3">点击我取消上一个ajax</button>
  <script>
    // 一、请求超时
    // ajax 请求时间过长
    // 1.设置请求超时时间 ： xhr.timeout = 2000;
    // 2.监听请求超时的事件 : xhr.ontimeout = function(){// 请求超时后需要干的事情};
    let btn1 = document.querySelector(".btn1");
    btn1.onclick = function () {
      let xhr = new XMLHttpRequest();
      xhr.open("get", "/getdata");
      // 设置请求超时时间，如果ajax超过了这个时间，那么ajax会自动停止请求
      xhr.timeout = 3000; // 设置请求超时2s钟
      xhr.ontimeout = function () {
        alert("网络异常");
      }
      xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log(xhr.responseText);
        }
      }
      xhr.send();
    }

    // 2.取消ajax请求
    /*
      xhr.abort();
      xhr.onabort=function() {} // 注意要先绑定再触发
    */
    let btn2 = document.querySelector(".btn2");
    let xhr2;


  </script>
</body>

</html>